import React from 'react';
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/ext-language_tools";

const JsEditor = ({ onChange, value }: any) => {
  return <AceEditor
    style={{ border: '1px solid #eee',width:'100%' }}
    theme="xcode"
    mode='javascript'
    value={value}
    onChange={onChange}
    fontSize={14}
    lineHeight={24}
    showPrintMargin={true}
    showGutter={true}
    highlightActiveLine={true}
    setOptions={{
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: false,
      enableMobileMenu: true,
      showLineNumbers: true,
      tabSize: 2,
    }}
    editorProps={{ $blockScrolling: true }}
  />
}
export default JsEditor